<template>
  <div class="todo-list">
    <!-- 个人信息 -->
    <div class="author-info">
      <h1>温州理工</h1>
      <p>学号：24219141111</p>
      <p>日期：2024/05/15</p>
    </div>

    <!-- Todo列表功能 -->
    <div class="todo-function">
      <div class="add-todo">
        <input 
          v-model="newTodoTitle"
          @keyup.enter="addTodo"
          placeholder="输入待办事项"
        >
        <button @click="addTodo">添加</button>
      </div>
      <div class="todos-container">
        <TodoItem
          v-for="(todo, index) in todos"
          :key="index"
          :title="todo.title"
          :completed="todo.completed"
          @update:completed="(status) => updateTodoCompleted(index, status)"
          @remove-todo="() => removeTodo(index)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  name: 'TodoList',
  components: {
    TodoItem
  },
  data() {
    return {
      todos: [],
      newTodoTitle: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodoTitle.trim()) {
        this.todos.push({
          title: this.newTodoTitle.trim(),
          completed: false
        })
        this.newTodoTitle = ''
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
    },
    updateTodoCompleted(index, status) {
      this.todos[index].completed = status
    }
  }
}
</script>

<style scoped>
.author-info {
  margin-bottom: 30px;
  color: #2c3e50;
}

.author-info h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.todo-function {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.add-todo {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #33a06f;
}
</style>